<template>
  <div class="member_list">
    <!-- 搜索栏 -->
    <el-card id="search">
      <!--  -->
      <el-row style="width: 96.3%">
        <el-col :span="24">
          <span>
            <el-input
              v-model="searchModel.search_key.name"
              placeholder="捐赠主体名称"
              clearable
              @change="getDonateRecordList"
              @clear="searchModel.search_key.name = ''"
            />
            <!-- <el-input
            v-model="searchModel.search_key.pay_status"
            placeholder="付款状态"
            clearable
            @change="getDonateRecordList"
            @clear="searchModel.search_key.pay_status = ''"
          /> -->
            <el-input
              v-model="searchModel.search_key.contact_information"
              placeholder="联系方式"
              clearable
              @change="getDonateRecordList"
              @clear="searchModel.search_key.contact_information = ''"
            />
            <el-select
              v-model="searchModel.search_key.pay_status"
              placeholder="付款状态"
              clearable
              @change="getDonateRecordList"
              @clear="searchModel.search_key.pay_status = null"
            >
              <el-option
                v-for="item in pay_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="searchModel.search_key.type"
              placeholder="捐赠主体类型"
              clearable
              @change="getDonateRecordList"
              @clear="searchModel.search_key.type = null"
            >
              <el-option
                v-for="item in type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="searchModel.search_key.planting_area_district"
              placeholder="种植区域镇区"
              clearable
              @change="getDonateRecordList"
              @clear="searchModel.search_key.planting_area_district = ''"
            />
            <el-input
              v-model="searchModel.search_key.planting_area_name"
              placeholder="种植区域乡村"
              clearable
              @change="getDonateRecordList"
              @clear="searchModel.search_key.planting_area_name = ''"
            />
            <el-input
              v-model="searchModel.search_key.planting_tree_name"
              placeholder="种植树种名称"
              clearable
              @change="getDonateRecordList"
              @clear="searchModel.search_key.planting_tree_name = ''"
            />
            <el-input
              v-model="searchModel.search_key.planting_tree_specification_name"
              placeholder="种植树种规格名称"
              clearable
              @change="getDonateRecordList"
              @clear="
                searchModel.search_key.planting_tree_specification_name = ''
              "
            />
            <el-input
              v-model="searchModel.search_key.donate_amount"
              placeholder="捐赠金额"
              clearable
              @change="getDonateRecordList"
              @clear="
                searchModel.search_key.donate_amount = ''
              "
            />
            <el-input
              v-model="searchModel.search_key.donate_number"
              placeholder="捐赠数量"
              clearable
              @change="getDonateRecordList"
              @clear="
                searchModel.search_key.donate_number = ''
              "
            />
            <el-input
              v-model="searchModel.search_key.donate_total"
              placeholder="捐赠总额"
              clearable
              @change="getDonateRecordList"
              @clear="
                searchModel.search_key.donate_total = ''
              "
            />
          </span>
          <el-input
            v-model="searchModel.search_key.out_trade_no"
            placeholder="商户订单号"
            clearable
            @change="getDonateRecordList"
            @clear="searchModel.search_key.out_trade_no = ''"
          />
          <el-input
            v-model="searchModel.search_key.prepay_id"
            placeholder="微信预付单号"
            clearable
            @change="getDonateRecordList"
            @clear="searchModel.search_key.prepay_id = ''"
          />
          <span v-show="isActive">
            <el-input
              v-model="searchModel.search_key.openid_mp"
              placeholder="openid"
              clearable
              @change="getDonateRecordList"
              @clear="searchModel.search_key.openid_mp = ''"
            />
            <el-date-picker
              v-model="searchModel.search_key.donate_at"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="捐赠开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="getDonateRecordList"
            />
            <el-date-picker
              v-model="searchModel.search_key.pay_at"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="付款开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="getDonateRecordList"
            />
            <el-date-picker
              v-model="searchModel.search_key.created_at"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="创建开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="getDonateRecordList"
            />
            <el-date-picker
              v-model="searchModel.search_key.updated_at"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="更新开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="getDonateRecordList"
            />
          </span>
          <span
            :style="{ float: 'auto', width: '370px', 'margin-right': '0px' }"
          >
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="getDonateRecordList"
              >查询</el-button
            >

            <el-button icon="el-icon-refresh" @click="clearSearchParams"
              >重置</el-button
            >
            <el-button
              type="warning"
              plain
              icon="el-icon-search"
              @click="exportExcel"
              >导出</el-button
            >
            <el-button
              type="text"
              style="
                margin-left: 20px;
                color: #8cc5ff;
                text-decoration: underline;
                font-size: 16px;
              "
              @click="isActive = !isActive"
            >
              {{ isActive ? "折叠" : "展开" }}
              <i
                :class="isActive ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              />
            </el-button>
            <!-- <el-button
              type="text"
              style="
                margin-left: 20px;
                color: #8cc5ff;
                text-decoration: underline;
                font-size: 16px;
              "
              @click="changeIsDetail"
            >
              {{ isDetail ? "省略" : "全部" }}
              <i
                :class="isDetail ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              />
            </el-button> -->
            <el-button v-show="false" style="width: 0px;opacity: 0;height:1px;float:right" class="btn" />
          </span>
        </el-col>
        <!-- <el-col :span="1" align="right"> -->
      </el-row>
      <!-- <el-button
        style="position: absolute; right: 30px; top: 20px"
        type="primary"
        icon="el-icon-plus"
        circle
        @click="openEditUI(null)"
      /> -->
      <!-- </el-col> -->
    </el-card>

    <!-- 结果列表 -->
    <el-card v-show="!isDetail">
      <el-table :data="userList" stripe style="width: 100%">
        <el-table-column label="序号" :width="widthList.index">
          <template slot-scope="scope">
            <!-- (page-1) * pageSize + index + 1 -->
            {{
              (searchModel.page - 1) * searchModel.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="id" label="id" width="96" /> -->
        <!-- <el-table-column prop="name" label="名称" /> -->
        <el-table-column prop="name" label="捐赠主体名称" :width="widthList.name">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.name"
              placement="top-start"
            >
              <div>{{ scope.row.name }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="contact_information"
          label="联系方式"
          :width="widthList.contact_information"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.contact_information"
              placement="top-start"
            >
              <div>{{ scope.row.contact_information }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="pay_status" label="付款状态" :width="widthList.pay_status">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pay_status == 1">已付款</el-tag>
            <el-tag v-else type="warning">未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="捐赠主体类型" :width="widthList.type">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == 0" type="warning">未知</el-tag>
            <el-tag v-else-if="scope.row.type == 1" type="primary">个人</el-tag>
            <el-tag v-else type="success">公司/组织</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="donate_amount"
          label="捐赠单价"
          :width="widthList.donate_amount"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.donate_amount"
              placement="top-start"
            >
              <div>{{ scope.row.donate_amount }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="donate_number"
          label="捐赠数量"
          :width="widthList.donate_number"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.donate_number"
              placement="top-start"
            >
              <div>{{ scope.row.donate_number }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="donate_total"
          label="捐赠总额"
          :width="widthList.donate_total"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.donate_total"
              placement="top-start"
            >
              <div>{{ scope.row.donate_total }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="planting_area_name"
          label="种植区域乡村"
          :width="widthList.planting_area_name"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.planting_area_name"
              placement="top-start"
            >
              <div>{{ scope.row.planting_area_name }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- planting_area_district -->
        <el-table-column
          prop="planting_area_district"
          label="种植镇区名称"
          :width="widthList.planting_area_district"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.planting_area_district"
              placement="top-start"
            >
              <div>{{ scope.row.planting_area_district }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="planting_tree_name"
          label="种植树种名称"
          :width="widthList.planting_area_name"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.planting_tree_name"
              placement="top-start"
            >
              <div>{{ scope.row.planting_tree_name }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="planting_tree_specification_name"
          label="种植规格名称"
          :width="widthList.planting_area_name"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.planting_tree_specification_name"
              placement="top-start"
            >
              <div>{{ scope.row.planting_tree_specification_name }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
         <el-table-column prop="out_trade_no" label="商户订单号" :width="widthList.out_trade_no">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.out_trade_no"
              placement="top-start"
            >
              <div>{{ scope.row.out_trade_no }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="pay_status" label="付款状态" width="106" /> -->
        <el-table-column prop="prepay_id" label="微信预付单号" :width="widthList.prepay_id">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.prepay_id"
              placement="top-start"
            >
              <div>{{ scope.row.prepay_id }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="donate_at" label="捐赠时间" :width="widthList.donate_at">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.donate_at"
              placement="top-start"
            >
              <div>{{ scope.row.donate_at }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="pay_at" label="付款时间" :width="widthList.pay_at">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.pay_at"
              placement="top-start"
            >
              <div>{{ scope.row.pay_at }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" :width="widthList.created_at">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.created_at"
              placement="top-start"
            >
              <div>{{ scope.row.created_at }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="updated_at" label="更新时间" :width="widthList.updated_at">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.updated_at"
              placement="top-start"
            >
              <div>{{ scope.row.updated_at }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- width="80" -->
        <el-table-column prop="openid_mp" label="openid">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.openid_mp"
              placement="top-start"
            >
              <div>{{ scope.row.openid_mp }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="操作"
          width="90"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              circle
              @click="openEditUI(scope.row.id)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              circle
              @click="deleteUser(scope.row)"
            />
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
    <el-drawer
      title="列设置"
      :visible.sync="drawerVisible"
      direction="rtl"
      :before-close="handleClose"
    >
      <div class="table-main">
        <!-- <el-table :data="columns">
          <el-table-column property="label" label="列名" width="150"></el-table-column>
          <el-table-column property="isShow" label="显示" width="200"></el-table-column>
          <el-table-column property="sortable" label="排序"></el-table-column>
        </el-table> -->
        <el-table :data="columns">
          <el-table-column prop="label" align="center" label="列名" />
          <el-table-column v-slot="scope" prop="isShow" align="center" label="显示">
            <el-switch v-model="scope.row.isShow"></el-switch>
          </el-table-column>
          <!-- <el-table-column v-slot="scope" prop="sortable" align="center" label="排序">
            <el-switch v-model="scope.row.sortable"></el-switch>
          </el-table-column> -->
          <template #empty>
            <div class="table-empty">
              <!-- <img src="@/assets/images/notData.png" alt="notData" /> -->
              <div>暂无可配置列</div>
            </div>
          </template>
        </el-table>
      </div>
    </el-drawer>
    <el-card v-show="isDetail">
      <!-- <div style="float: right; margin: 0px 20px 10px">
        <el-button
          icon="el-icon-setting"
          circle
          @click="openColSetting"
        />
      </div> -->
      <!-- <el-table :data="userList" stripe style="width: 100%">
        <el-table-column v-for="(column, index) in columns" v-show="!column.isShow" :key="index" :prop="column.prop" :label="column.label" :width="column.width">
          <template slot-scope="scope">
            <el-tooltip effect="dark" :content="scope.row[column.prop]" placement="top-start">
              <div>{{ scope.row[column.prop] }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="110" header-align="center" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view" size="mini" circle @click="openEditUI(scope.row.id)" />
          </template>
        </el-table-column>
      </el-table> -->
      <el-table :data="userList" stripe style="width: 100%">
        <el-table-column v-if="findItem('index')" label="序号" :width="widthList.index" align="center">
          <template slot-scope="scope">
            {{
              (searchModel.page - 1) * searchModel.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column v-if="findItem('name')" prop="name" label="捐赠主体名称" :width="widthList.name" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.name"
              placement="top-start"
            >
              <div>{{ scope.row.name }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          v-if="findItem('contact_information')"
          prop="contact_information"
          label="联系方式"
          :width="widthList.contact_information"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.contact_information"
              placement="top-start"
            >
              <div>{{ scope.row.contact_information }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- v-if="findItem('pay_status')" -->
        <el-table-column prop="pay_status" label="付款状态" :width="widthList.pay_status" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pay_status == 1">已付款</el-tag>
            <el-tag v-else type="warning">未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="捐赠主体类型" :width="widthList.type" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == 0" type="warning">未知</el-tag>
            <el-tag v-else-if="scope.row.type == 1" type="primary">个人</el-tag>
            <el-tag v-else type="success">公司/组织</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="findItem('donate_amount')"
          prop="donate_amount"
          label="捐赠单价"
          :width="widthList.donate_amount"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.donate_amount"
              placement="top-start"
            >
              <div>{{ scope.row.donate_amount }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          v-if="findItem('donate_number')"
          prop="donate_number"
          label="捐赠数量"
          :width="widthList.donate_number"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.donate_number"
              placement="top-start"
            >
              <div>{{ scope.row.donate_number }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          v-if="findItem('donate_total')"
          prop="donate_total"
          label="捐赠总额"
          :width="widthList.donate_total"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.donate_total"
              placement="top-start"
            >
              <div>{{ scope.row.donate_total }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="planting_area_district"
          label="种植区域镇区"
          :width="widthList.planting_area_district"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.planting_area_district"
              placement="top-start"
            >
              <div>{{ scope.row.planting_area_district }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          v-if="findItem('planting_area_name')"
          prop="planting_area_name"
          label="种植区域乡村"
          :width="widthList.planting_area_name"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.planting_area_name"
              placement="top-start"
            >
              <div>{{ scope.row.planting_area_name }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          v-if="findItem('planting_tree_name')"
          prop="planting_tree_name"
          label="种植树种名称"
          :width="widthList.planting_area_name"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.planting_tree_name"
              placement="top-start"
            >
              <div>{{ scope.row.planting_tree_name }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          v-if="findItem('planting_tree_specification_name')"
          prop="planting_tree_specification_name"
          label="种植规格名称"
          :width="widthList.planting_area_name"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.planting_tree_specification_name"
              placement="top-start"
            >
              <div>{{ scope.row.planting_tree_specification_name }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column v-if="findItem('out_trade_no')" prop="out_trade_no" label="商户订单号" :width="widthList.out_trade_no" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.out_trade_no"
              placement="top-start"
            >
              <div>{{ scope.row.out_trade_no }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column v-if="findItem('prepay_id')" prop="prepay_id" label="微信预付单号" :width="widthList.prepay_id" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.prepay_id"
              placement="top-start"
            >
              <div>{{ scope.row.prepay_id }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- v-if="findItem('type')" -->
        <el-table-column v-if="findItem('donate_at')" prop="donate_at" label="捐赠时间" :width="widthList.donate_at" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.donate_at"
              placement="top-start"
            >
              <div>{{ scope.row.donate_at }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column v-if="findItem('pay_at')" prop="pay_at" label="付款时间" :width="widthList.pay_at" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.pay_at"
              placement="top-start"
            >
              <div>{{ scope.row.pay_at }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column v-if="findItem('created_at')"  prop="created_at" label="创建时间" :width="widthList.created_at" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.created_at"
              placement="top-start"
            >
              <div>{{ scope.row.created_at }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column v-if="findItem('updated_at')" prop="updated_at" label="更新时间" :width="widthList.updated_at" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.updated_at"
              placement="top-start"
            >
              <div>{{ scope.row.updated_at }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column v-if="findItem('openid_mp')" prop="openid_mp" label="openid" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.openid_mp"
              placement="top-start"
            >
              <div>{{ scope.row.openid_mp }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          v-if="findItem('operation')"
          label="操作"
          width="110"
          header-align="center"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-view"
              size="mini"
              circle
              @click="openEditUI(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页组件 -->
    <el-pagination
      :current-page="searchModel.page"
      :page-sizes="[5, 10, 20, 50, 100]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 用户信息编辑对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="clearForm"
    >
      <!-- :rules="rules" -->
      <el-form ref="userFormRef" :model="userForm" >
        <el-form-item
          label="捐赠主体名称"
          prop="name"
          :label-width="formLabelWidth"
        >
          <el-input disabled v-model="userForm.out_trade_no" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="联系方式"
          prop="name"
          :label-width="formLabelWidth"
        >
          <el-input disabled v-model="userForm.contact_information" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="商户订单号"
          prop="out_trade_no"
          :label-width="formLabelWidth"
        >
          <el-input disabled v-model="userForm.out_trade_no" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="微信预付单号"
          prop="prepay_id"
          :label-width="formLabelWidth"
        >
          <el-input disabled v-model="userForm.prepay_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="付款状态"
          prop="pay_status"
          :label-width="formLabelWidth"
        >
          <!-- <el-select
            v-model="userForm.pay_status"
            placeholder="付款状态"
          >
            <el-option
              v-for="item in pay_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
          <el-radio-group v-model="userForm.pay_status" disabled>
            <el-radio :label="0">未付款 </el-radio>
            <el-radio :label="1">已付款</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="捐赠金额" :label-width="formLabelWidth">
          <el-input disabled v-model="userForm.donate_amount" />
        </el-form-item>
        <el-form-item label="捐赠数量" :label-width="formLabelWidth">
          <el-input disabled v-model="userForm.donate_number" />
        </el-form-item>
        <el-form-item label="捐赠总额" :label-width="formLabelWidth">
          <el-input disabled v-model="userForm.donate_total" />
        </el-form-item>
        <el-form-item
          label="种植区域乡村"
          prop="planting_area_name"
          :label-width="formLabelWidth"
        >
          <el-input disabled v-model="userForm.planting_area_name" />
        </el-form-item>
        <el-form-item label="种植树种名称" :label-width="formLabelWidth">
          <el-input disabled v-model="userForm.planting_tree_name" />
        </el-form-item>
        <el-form-item label="种植树种规格名称" :label-width="formLabelWidth">
          <el-input disabled v-model="userForm.planting_tree_specification_name" />
        </el-form-item>

        <el-form-item label="捐赠主体类型" :label-width="formLabelWidth">
          <!-- <el-select
            v-model="userForm.type"
            placeholder="捐赠主体类型"
          >
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
          <!-- <el-tag v-if="userForm.type == 0" type="warning">未知</el-tag>
          <el-tag v-else-if="userForm.type == 1" type="primary">个人</el-tag>
          <el-tag v-else-if="userForm.type == 2" type="success">公司/组织</el-tag> -->
          <el-radio-group v-model="userForm.type" disabled>
            <el-radio :label="0">未知 </el-radio>
            <el-radio :label="1">个人</el-radio>
            <el-radio :label="2">公司/组织</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="付款时间" :label-width="formLabelWidth">
          <el-input disabled v-model="userForm.pay_at" />
        </el-form-item>
        <el-form-item label="捐赠日期" :label-width="formLabelWidth">
          <el-input disabled v-model="userForm.donate_at" />
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-input disabled v-model="userForm.created_at" />
        </el-form-item>
        <el-form-item label="更新时间" :label-width="formLabelWidth">
          <el-input disabled v-model="userForm.updated_at" />
        </el-form-item>
        <el-form-item label="openid" :label-width="formLabelWidth">
          <el-input disabled v-model="userForm.openid_mp" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- <el-button type="primary" @click="saveArea">确 定</el-button> -->
      </div>
    </el-dialog>
    <!-- 车牌号 -->
  </div>
</template>

<script>
import recordApi from "@/api/record";
import exportUtil from "@/excel/ExportExcel";

export default {
  data() {
    // 表格配置项
    const checkaccount = (rule, value, callback) => {
      var reg =
        /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
      if (!reg.test(value)) {
        return callback(new Error("邮箱格式错误"));
      }
      callback();
    };
    return {
      enumMap: null,
      columns1: {
        index: {
          type: "index",
          label: "索引",
          width: 85,
          isShow: false
        }, //
        // { type: "expand", label: "展开", width: 70 }, //
        name: {
          prop: "name",
          label: "捐赠主体名称",
          search: { el: "input" },
          width: 116,
          isShow: true
        },
        contact_information: {
          prop: "contact_information",
          label: "捐赠主体联系方式",
          search: { el: "input" },
          width: 148,
          isShow: true
        },
        out_trade_no: {
          prop: "out_trade_no",
          label: "商户订单号",
          search: { el: "input" },
          width: 160,
          isShow: true
        },
        prepay_id: {
          prop: "prepay_id",
          label: "微信预付单号",
          search: { el: "input" },
          width: 150,
          isShow: true
        },
        pay_status: {
          prop: "pay_status",
          label: "付款状态",
          tag: true,
          // enum: pay_status,
          search: { el: "tree-select" },
          fieldNames: { label: "label", value: "value" },
          width: 104,
          isShow: true
        },
        planting_area_name: {
          prop: "planting_area_name",
          label: "种植区域乡村",
          search: { el: "input" },
          width: 160,
          isShow: true
        },
        // planting_area_district
        planting_area_district: {
          prop: "planting_area_district",
          label: "种植区域镇区",
          search: { el: "input" },
          width: 220,
          isShow: true
        },
        planting_tree_name: {
          prop: "planting_tree_name",
          label: "种植树种名称",
          search: { el: "input" },
          width: 160,
          isShow: true
        },
        planting_tree_specification_name: {
          prop: "planting_tree_specification_name",
          label: "种植树种规格名称",
          search: { el: "input" },
          width: 150
        },
        // {
        //   prop: "type",
        //   label: "捐赠主体类型",
        //   tag: true,
        //   sortable: true, // 排序
        //   // enum: type,
        //   search: { el: "tree-select" },
        //   fieldNames: { label: "label", value: "value" },
        //   width: 140
        // },
        donate_amount: {
          prop: "donate_amount",
          label: "捐赠金额",
          search: { el: "input" },
          sortable: true,
          width: 110,
          isShow: true
        },
        donate_number: {
          prop: "donate_number",
          label: "捐赠数量",
          search: { el: "input" },
          sortable: true,
          width: 110,
          isShow: true
        },
        donate_total: {
          prop: "donate_total",
          label: "捐赠总额",
          search: { el: "input" },
          sortable: true,
          width: 110,
          isShow: true
        },
        pay_at: {
          prop: "pay_at",
          label: "付款时间",
          // headerRender,
          width: 140,
          search: {
            el: "date-picker",
            span: 2,
            props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
          },
          sortable: true,
          isShow: true
        },
        donate_at: {
          prop: "donate_at",
          label: "捐赠时间",
          // headerRender,
          width: 144,
          search: {
            el: "date-picker",
            span: 2,
            props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
          },
          sortable: true,
          isShow: true
        },
        created_at: {
          prop: "created_at",
          label: "创建时间",
          // headerRender,
          width: 140,
          search: {
            el: "date-picker",
            span: 2,
            props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
          },
          sortable: true,
          isShow: true
        },
        updated_at: {
          prop: "updated_at",
          label: "更新时间",
          // headerRender,
          width: 140,
          search: {
            el: "date-picker",
            span: 2,
            props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
          },
          sortable: true, // 排序
          isShow: true
        },
        openid_mp: {
          prop: "openid_mp",
          label: "openid",
          search: { el: "input" },
          sortable: true, // 排序，
          width: 110,
          isShow: true
        },
        operation: { prop: "operation", label: "操作", fixed: "right", width: 100 }
      },
      columns: [
        {
          type: "index",
          prop: "index",
          label: "索引",
        }, //
        // { type: "expand", label: "展开", width: 70 }, //
        {
          prop: "name",
          label: "捐赠主体名称",
        },
        {
          prop: "contact_information",
          label: "捐赠主体联系方式",
        },
        {
          prop: "out_trade_no",
          label: "商户订单号",
        },
        {
          prop: "prepay_id",
          label: "微信预付单号",
        },
        // {
        //   prop: "pay_status",
        //   label: "付款状态",
        //   tag: true,
        //   // enum: pay_status,
        //   search: { el: "tree-select" },
        //   fieldNames: { label: "label", value: "value" },
        //   width: 104
        // },
        {
          prop: "planting_area_name",
          label: "种植区域乡村",
          search: { el: "input" },
          width: 160
        },
        {
          prop: "planting_tree_name",
          label: "种植树种名称",
          search: { el: "input" },
          width: 160
        },
        {
          prop: "planting_tree_specification_name",
          label: "种植树种规格名称",
          search: { el: "input" },
          width: 150
        },
        // {
        //   prop: "type",
        //   label: "捐赠主体类型",
        //   tag: true,
        //   sortable: true, // 排序
        //   // enum: type,
        //   search: { el: "tree-select" },
        //   fieldNames: { label: "label", value: "value" },
        //   width: 140
        // },
        {
          prop: "donate_amount",
          label: "捐赠金额",
          search: { el: "input" },
          sortable: true,
          width: 110
        },
        {
          prop: "donate_number",
          label: "捐赠数量",
          search: { el: "input" },
          sortable: true,
          width: 110
        },
        {
          prop: "donate_total",
          label: "捐赠总额",
          search: { el: "input" },
          sortable: true,
          width: 110
        },
        {
          prop: "pay_at",
          label: "付款时间",
          // headerRender,
          width: 140,
          search: {
            el: "date-picker",
            span: 2,
            props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
          },
          sortable: true // 排序
        },
        {
          prop: "donate_at",
          label: "捐赠时间",
          // headerRender,
          width: 146,
          search: {
            el: "date-picker",
            span: 2,
            props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
          },
          sortable: true // 排序
        },
        {
          prop: "created_at",
          label: "创建时间",
          // headerRender,
          width: 140,
          search: {
            el: "date-picker",
            span: 2,
            props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
          },
          sortable: true // 排序
        },
        {
          prop: "updated_at",
          label: "更新时间",
          // headerRender,
          width: 140,
          search: {
            el: "date-picker",
            span: 2,
            props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
          },
          sortable: true // 排序
        },
        {
          prop: "openid_mp",
          label: "openid",
          search: { el: "input" },
          sortable: true, // 排序，
          width: 110
        },
        { prop: "operation", label: "操作", fixed: "right", width: 100 }
      ],
      drawerVisible: false,
      widthList: {
        index: 48,
        name: 104,
        contact_information: 106,
        out_trade_no: 110,
        prepay_id: 110,
        pay_status: 80,
        donate_amount: 80,
        donate_number: 80,
        donate_total: 80,
        planting_area_name: 104,
        planting_tree_name: 104,
        planting_area_district: 104,
        planting_tree_specification_name: 108,
        type: 104,
        donate_at: 106,
        pay_at: 106,
        created_at: 106,
        updated_at: 106,
      },
      isActive: false,
      isDetail: true,
      dialogVisible: false,
      carList: [],
      type: [
        {
          value: 1,
          label: "个人",
        },
        {
          value: 0,
          label: "未知",
        },
        {
          value: 2,
          label: "公司/组织",
        },
      ],
      pay_status: [
        {
          value: 1,
          label: "已付款",
        },
        {
          value: 0,
          label: "未付款",
        },
        // {
        //   value: -1,
        //   label: 'null'
        // }
      ],
      formLabelWidth: "130px",
      userForm: {},
      myUserForm: {},
      dialogFormVisible: false,
      title: "",
      total: 0,
      searchModel: {
        page: 1,
        pageSize: 10,
        search_key: {},
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0, 0, 0, 0); // 设置时间为0点0分0秒0毫秒
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近两天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              start.setHours(0, 0, 0, 0); // 设置时间为0点0分0秒0毫秒
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              start.setHours(0, 0, 0, 0); // 设置时间为0点0分0秒0毫秒
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      userList: [],
      rules: {
        name: [
          {
            required: true,
            message: "请输入种植捐赠主体名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登录初始密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        account: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { validator: checkaccount, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    flatColumns: function() {
      return this.flatColumnsFunc(this.columns);
    }
  },
  created() {
    this.getDonateRecordList();
  },
  mounted() {
    this.columns = this.columns.map((item) => {
      return {
        ...item,
        isShow: item.isShow ? item.isShow : true
      }
    })
  },
  methods: {
    findItem(name) {
      const item = this.columns.find(item => item.prop === name) || { isShow: false }
      return item.isShow
    },
    handleClose(done) {
      done();
      this.dialogVisible = false;
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //   })
      //   .catch(_ => {});
    },
    async setEnumMap({ prop, enum: enumValue }) {
      if (!enumValue) return;

      // 如果当前 enumMap 存在相同的值 return
      if (this.enumMap.has(prop) && (typeof enumValue === "function" || this.enumMap.get(prop) === enumValue)) return;

      // 当前 enum 为静态数据，则直接存储到 this.enumMap (typeof enumValue !== "function") return this.enumMap.set(prop, unref(enumValue));

      // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
      this.enumMap.set(prop, []);

      // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 this.enumMap
      const { data } = await enumValue();
      this.enumMap.set(prop, data);
    },
    // 扁平化 columns 的方法
    flatColumnsFunc(columns, flatArr = []) {
      columns.forEach(async col => {
        if (col._children?.length) flatArr.push(...this.flatColumnsFunc(col._children));
        flatArr.push(col);

        // column 添加默认 isShow && isFilterEnum 属性值
        col.isShow = col.isShow ?? true;
        col.isFilterEnum = col.isFilterEnum ?? true;

        // 设置 enumMap
        await this.setEnumMap(col);
      });
      return flatArr.filter(item => !item._children?.length);
    },
    openColSetting() {
      this.drawerVisible = true
    },
    changeIsDetail() {
      if (this.isDetail) {
        // 详情 改为省略
        this.widthList = {
          index: 48,
          name: 104,
          contact_information: 106,
          out_trade_no: 90,
          prepay_id: 104,
          pay_status: 84,
          donate_amount: 80,
          donate_number: 80,
          donate_total: 80,
          planting_area_name: 104,
          planting_tree_name: 104,
          planting_tree_specification_name: 104,
          type: 104,
          donate_at: 104,
          pay_at: 106,
          created_at: 106,
          updated_at: 106,
        }
        this.isDetail = false
      } else {
        this.widthList = {
          index: 48,
          name: 104,
          contact_information: 106,
          out_trade_no: 160,
          prepay_id: 150,
          pay_status: 104,
          donate_amount: 80,
          donate_number: 80,
          donate_total: 80,
          planting_area_name: 160,
          planting_tree_name: 150,
          planting_tree_specification_name: 160,
          type: 104,
          donate_at: 150,
          pay_at: 150,
          created_at: 150,
          updated_at: 150,
        }
        this.isDetail = true
      }
    },
    open(id) {
      // 请求
      recordApi.getCarList(id).then((res) => {
        console.log(res.data);
        this.carList = res.data;
        this.dialogVisible = true;
      });
    },
    // handleClose() {
    // },
    // 导出
    exportExcel() {
      require.ensure([], () => {
        const fieldName = [
          "序号",
          "捐赠主体名称",
          "捐赠主体联系方式",
          "付款状态",
          "捐赠主体类型",
          "捐赠单价",
          "捐赠数量",
          "捐赠总额",
          "种植区域镇区",
          "种植区域乡村",
          "种植树种名称",
          "种植树种规格名称",
          "商户订单号",
          "微信预付单号",
          "捐赠时间",
          "付款时间",
          "创建时间",
          "更新时间",
          "openid",
        ];
        const filterVal = [
          "index",
          "name",
          "contact_information",
          "pay_status",
          "type",
          "donate_amount",
          "donate_number",
          "donate_total",
          "planting_area_district",
          "planting_area_name",
          "planting_tree_name",
          "planting_tree_specification_name",
          "out_trade_no",
          "prepay_id",
          "donate_at",
          "pay_at",
          "created_at",
          "updated_at",
          "openid_mp",
        ];
        // const data = this.userList.map(v => filterVal.map(j => v[j]));
        const data = this.userList.map((v, i) =>
          filterVal.map((j) => {
            if (j === "index") {
              return i;
            } else if (j === "pay_status") {
              return v[j] === 0 ? "未付款" : "已付款";
            } else if (j === "type") {
              return v[j] === 0 ? "未知" : v[j] === 1 ? "个人" : "公司/组织";
            } else {
              return v[j];
            }
          })
        );
        const item = this.userList[0];
        console.log(fieldName, data, `${item.name}`);
        exportUtil.export_json_to_excel(
          fieldName,
          data,
          `${item.name} - ${new Date().toLocaleString().replaceAll("/", "-")}`
        );
        // exportUtil.export_json_to_excel(fieldName, data, `${item.name} - ${new Date().toLocaleDateString().replaceAll('/', '-')}`);
      });
    },
    // 修改启用状态
    changeStatus(e) {
      console.log(e, "pay_status");
      // 确认吗
    },
    deleteUser(area) {
      this.$confirm(`您确认删除用户 ${area.name} ?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(11);
          recordApi.deleteAreaById(area.id).then((response) => {
            this.$message({
              type: "success",
              message: "删除成功" || response.msg,
            });
            this.getDonateRecordList();
          });
        })
        .catch(() => {
          console.log(22);
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    saveArea() {
      // 触发表单验证
      this.$refs.userFormRef.validate((valid) => {
        if (valid) {
          // 提交请求给后台
          // 修改状态
          // const item = { ...this.userList.filter((item) => item.id === this.userForm.id)[0] }
          // if (item.pay_status !== this.userForm.pay_status) {
          //   recordApi.updateMemberStatus(this.userForm)
          // }
          // 保存
          recordApi.saveArea(this.userForm).then((response) => {
            // 成功提示
            this.$message({
              message: "保存成功",
              type: "success",
            });
            // 关闭对话框
            this.dialogFormVisible = false;
            // 刷新表格
            this.getDonateRecordList();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    clearForm() {
      this.userForm = {};
      this.$refs.userFormRef.clearValidate();
    },
    openEditUI(id) {
      if (id == null) {
        this.title = "新增种植区域";
      } else {
        this.title = "查看捐赠记录";
        // 根据id查询用户数据
        // recordApi.getUserById(id).then((response) => {
        //   this.userForm = response.data;
        // });
        // 根据分页筛选
        const item = { ...this.userList.filter((item) => item.id === id)[0] };
        this.userForm = item;
      }
      this.dialogFormVisible = true;
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.getDonateRecordList();
    },
    handleCurrentChange(page) {
      this.searchModel.page = page;
      this.getDonateRecordList();
    },
    getDonateRecordList() {
      recordApi.getDonateRecordList(this.searchModel).then((response) => {
        //
        this.userList = response.data.data;
        this.total = response.data.total;
      });
    },
    // 重置
    clearSearchParams() {
      this.searchModel = {
        page: 1,
        pageSize: 10,
        search_key: {},
      };
      this.getDonateRecordList();
    },
  }
};
</script>

<style lang="scss" scoped>
  .table-main {
    // overflow: auto;
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    // height: 100%;

    // table-search 表格搜索样式
    .table-search {
      padding: 18px 18px 0;
      margin-bottom: 10px;
      .el-form {
        .el-form-item__content > * {
          width: 100%;
        }

        // 去除时间选择器上下 padding
        .el-range-editor.el-input__wrapper {
          padding: 0 10px;
        }
      }
      .operation {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 18px;
      }
    }

    // 表格 header 样式
    .table-header {
      .header-button-lf {
        float: left;
      }
      .header-button-ri {
        float: right;
      }
      .el-button {
        margin-bottom: 15px;
      }
    }

    // el-table 表格样式
    .el-table {
      flex: 1;

      // 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
      table {
        width: 100%;
      }
      .el-table__header th {
        height: 45px;
        font-size: 15px;
        font-weight: bold;
        color: var(--el-text-color-primary);
        background: var(--el-fill-color-light);
      }
      .el-table__row {
        height: 45px;
        font-size: 14px;
        .move {
          cursor: move;
          .el-icon {
            cursor: move;
          }
        }
      }

      // 设置 el-table 中 header 文字不换行，并省略
      .el-table__header .el-table__cell > .cell {
        // white-space: nowrap;
        white-space: wrap;
      }

      // 解决表格数据为空时样式不居中问题(仅在element-plus中)
      .el-table__empty-block {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .table-empty {
          line-height: 30px;
        }
      }

      // table 中 image 图片样式
      .table-image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    // 表格 pagination 样式
    .el-pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }

::v-deep {
  .el-button.btn{
    height: 0;
  }
}
.btn {
  height: 0;
}
.carItem {
  margin-bottom: 12px;
  div {
    margin-bottom: 4px;
    span {
      width: 76px;
      display: inline-block;
    }
  }
}
.member_list {
  .el-table__row .el-table__cell,
  .el-tooltip,
  .el-button .cell {
    white-space: nowrap;
    /* width: 50px; */
    overflow: hidden;
    text-overflow: ellipsis; /* 显示省略号 */
  }
}

.el-select {
  // margin-right: 10px;
}
#search {
  display: flex;
  flex-wrap: wrap;
  .el-input {
    // width: 190px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .el-date-editor {
    margin-right: 12px;
    margin-bottom: 10px;
  }
}
.el-dialog .el-input {
  width: 75%;
}
</style>
